<style>
.title .ivu-card-head{
  background-color: #2d8cf0  !important;
  color: white !important;
}
</style>
<template>
  <Tabs :animated="false" v-model="activeTab" @on-click="handleTabClick">
    <TabPane label="角色信息" name="name1">
      <div style="display: flex">
        <div style="flex: 2;margin-right: 20px">
          <Card title="基本信息" icon="ios-options" :padding="0" :bordered="false"  dis-hover>
            <Form  label-position="left" :label-width="100" style="margin-left: 15px">
              <FormItem label="ID" style="margin-top: 10px;margin-bottom: 5px;font-weight: bold;font-size: large">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
              <FormItem label="角色名称" style="margin-bottom: 5px;font-weight: bold;">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
              <FormItem label="类别" style="margin-bottom: 5px;font-weight: bold;">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
              <FormItem label="内置" style="margin-bottom: 5px;font-weight: bold;">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
              <FormItem label="创建者" style="margin-bottom: 5px;font-weight: bold;">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
              <FormItem label="创建日期" style="margin-bottom: 5px;font-weight: bold;">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
              <FormItem label="更新日期" style="margin-bottom: 5px;font-weight: bold;">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
              <FormItem label="备注" style="margin-bottom: 5px;font-weight: bold;">
                <span style="margin-left: 100px">系统管理员</span>
              </FormItem>
            </Form>
          </Card>
        </div>
        <div style="flex: 1.5;display: flex;flex-direction: column">
          <Card title="权限" icon="ios-options" :padding="0"  :bordered="false"  dis-hover></Card>
          <Button long type="primary" style="margin-top: 10px;margin-left: 20px;">更新</Button>
          <AccessControl style="padding-left: 20px"></AccessControl>
        </div>
      </div>
    </TabPane>
    <TabPane label="授权用户" name="name2">
      <div style="display: flex">
        <div style="flex: 2;margin-right: 20px">
          <Input  style="margin-bottom: 10px" v-model="keyword" @on-search="searchData" @on-clear="clearInput" search enter-button placeholder="搜索" clearable class="input-container" />
          <Table border :columns="columns" :data="data"></Table>
          <Page style="margin-top: 10px;text-align: center"  @on-change="handlePageChange"  :current="currentPage" :total="total" show-total />
        </div>
        <div style="flex:1.5;display: flex;flex-direction: column">
          <Row>
            <Col >
              <Card dis-hover class="title">
                <template #title>
                  <Icon type="md-person" /> 成员
                </template>
                <Input v-model="Inputvalue"  />
                <Button type="primary" style="margin-top: 10px">添加</Button>
              </Card>
            </Col>
          </Row>
        </div>
      </div>

    </TabPane>
  </Tabs>
</template>

<script>
import AccessControl from "@/user/accessControl.vue";


export default {
  name:'UserRoleDetails',
  components:{
    AccessControl,
  },
  inject:['reload'],
  data () {
    return {
      switchValue: true,
      Inputvalue: '',
      data:[
        {
          username:'1111',
        },
        {
          username:'1111',
        },
        {
          username:'1111',
        },
        {
          username:'1111',
        },

      ],
      columns:[
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title:"用户名称",
          align:'center',
          key:'username',
        },
        {
          title:"组织名称",
          align:'center',
          key:'username',
        },
        {
          title:"操作",
          align: 'center',
          key:'more',
          render: (h, params) => {
            return h('div', {
              style: {
                display: 'flex',
                justifyContent: 'center'
              }
            }, [
              h('Button', {
                props: {
                  type: 'error'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => this.deleteItem(params.row) // 这里传递当前行数据给删除方法
                }
              }, '删除'),
            ]);
          }
        }
      ]
    }
  },
  methods: {

  }
}
</script>
